{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "products/vpn/includes/macros.html" import vpn_nav_platform_cta, vpn_platform_hero with context %}

{% extends "products/vpn/base.html" %}

{% block page_title_suffix %}{% endblock %}

{% block page_css %}
  {{ css_bundle('mozilla-vpn-platforms') }}
{% endblock %}

{% block site_header %}
  {% with
    custom_nav_cta=vpn_nav_platform_cta(
      alt_link_text='vpn-shared-subscribe-link',
    )
  %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block content %}
<main>
  {% block hero %}
    {% call vpn_platform_hero(
      heading=ftl('vpn-shared-product-name'),
      subheading=subheading,
      desc=desc,
      image=resp_img(
        url='img/products/vpn/platforms/vpn-hero-desktop.png',
        srcset={
          'img/products/vpn/platforms/vpn-hero-desktop-high-res.png': '2x'
        },
        optional_attributes={
          'width': '480',
          'height': '480'
        }
      )
      ) %}
      <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('products.vpn.landing') }}">{{ ftl('vpn-shared-subscribe-link')}}</a>
    {% endcall %}
  {% endblock %}


  <div class="mzp-l-content mzp-t-content-md platform-article">
    <article class="mzp-c-article">
      {% block article %}{% endblock %}
    </article>
  </div>

  <div class="mzp-l-content mzp-t-content-lg c-vpn-platform-footer">
      <div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-vpn">{{ ftl('vpn-shared-product-name') }}</div>
      <p><a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('products.vpn.landing') }}#pricing">{{ ftl('vpn-shared-subscribe-link') }}</a></p>
  </div>
  </main>
{% endblock %}
